<template>
	<div>
		<div v-if="!searchActive" class="searchDiv">
			<span>{{ title }}</span>
			<span @click="setSearchActive(true)">
				<i class="el-icon-search"></i>
			</span>
		</div>
		<div v-else class="searchDiv">
			<el-input
				ref="inp"
				@keyup.enter.native="onSearch(value)"
				@keyup.27.native="close"
				v-model="value"
				size="mini"
				class="inp"
				placeholder="请输入搜索关键词"></el-input>
			<span @click="close">
				<i class="el-icon-close"></i>
			</span>
		</div>
	</div>
</template>
<script>
import useIpcRenderer from "../hooks/useIpcRenderer"
export default {
	name: "SearchFile",
	components: {},
	props: {
		title: { type: String, default: "" },
		onSearch: Function,
	},
	data() {
		return {
			searchActive: false,
			value: "",
		}
	},
	mounted() {
		useIpcRenderer({
			//这里参数传参了，需要再包一层
			"execute-search-file": () => this.setSearchActive(true),
		})
	},
	methods: {
		setSearchActive(val) {
			this.searchActive = val
			if (val) {
				//因为这里v-else要等input渲染处来，所以需要this.$nextTick
				this.$nextTick(() => {
					this.$refs.inp.focus()
				})
			}
		},
		close() {
			this.value = ""
			this.searchActive = false
			//关闭后回到原来的数据
			this.onSearch("")
		},
	},
}
</script>
<style scoped>
/*自定义搜索区域的div */
.searchDiv {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid white;
}
span {
	color: #fff;
	padding: 0 10px;
	font: normal 16px/40px "微软雅黑";
}
.inp {
	width: 220px;
	margin-left: 10px;
}
</style>
